﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>数据字典</title>
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/bootstrap-table/dist/bootstrap-table.min.css" />

    <link rel="stylesheet" href="../lib/aierp/css/framework-font.css" />
    <link rel="stylesheet" href="../lib/aierp/css/framework-ui.css" />
    <link rel="stylesheet" href="../lib/sco.js-master/css/sco.message.css" />
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/jquery.cookie/jquery.cookie.js"></script>
    <script src="../lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../lib/dialog/dialog.js"></script>
    <script src="../lib/aierp/js/framework-ui.js"></script>
    <script src="../lib/aierp/js/framework-clientdata.js"></script>
    <script src="../lib/sco.js-master/js/sco.message.js"></script>
    <script src="../lib/knockout/dist/knockout.js"></script>
    <script src="../lib/knockout/dist/knockout.mapping.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/common.js" asp-append-version="true"></script>
    <style>
        .modal-body .control-group {
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .row {
            margin-right: 0px;
            margin-left: 0px;
        }
        .pagination-info {
            display: none;
        }
        .content {
            padding-left: 0px;
            padding-right: 4px;
            font-size: 13px;
            
        }
        .categoryFont {
            font-weight:600;
        }
    </style>
</head>
<body>
    <div class="row">
    <div class="topPanel">
        <div class="search">
            <table>
                <tr>
                    <td>
                        <div class="toolbar">
                            <div class="btn-group">
                                <button class="btn btn-success" data-bind="click:OpenAddCategoryModal"><i class="fa fa-plus"></i>添加分类</button>
                                <button class="btn btn-success" data-bind="click:OpenEditCategoryModal"><i class="fa fa-pencil-square-o"></i>修改</button>
                                <button class="btn btn-success" data-bind="click:DeleteCategory"><i class="fa fa-trash-o"></i>删除</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="toolbar">
            <div class="btn-group">
                <a class="btn btn-default" id="refreshBtn"><span class="glyphicon glyphicon-refresh" data-bind="click:Refresh"></span></a>
            </div>
            <div class="btn-group">
                <button id="AddBtn" class="btn btn-primary" data-bind="click:OpenAddModal"><i class="fa fa-plus"></i>添加</button>
                <button class="btn btn-primary" data-bind="click:OpenEditModal"><i class="fa fa-pencil-square-o"></i>修改</button>
                <button class="btn btn-primary" data-bind="click:Delete"><i class="fa fa-trash-o"></i>删除</button>
            </div>
        </div>
    </div>
    </div>
        <!--Grid界面-->
    <div class="row">
       <div class="col-sm-2 content categoryFont">
        <div class="table-responsive" style="min-width: 160px;">
            <table class="table table-hover" id="categoryTable" style="cursor: pointer;"></table>
        </div>
    </div>
    <div class="col-sm-9 content">
        <div class="table-responsive" style="min-width: 450px;">
            <table class="table table-hover" id="dicsTable" style="cursor: pointer;">
            </table>
        </div>
    </div>
    </div>
        <!--Grid界面-->
        <!--Modal界面-->
<div id="DicsModal" class="modal fade" data-keyboard="false" data-backdrop="static" role="dialog" tabindex="-1" aria-hidden="true" data-toggle="validator">
    <div class="modal-dialog" style="width: 30%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="H1" style="text-align: center"><b>数据字典</b></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="col-sm-3 control-label">标题*</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" data-bind="value:model.Title" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="col-sm-3 control-label">编码*</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" data-bind="value:model.Code" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="col-sm-3 control-label">排序*</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" data-bind="value:model.Sortnum" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="col-sm-3 control-label">是否默认</label>
                        <div class="col-sm-8">
                            <label><input type="radio" name="IsDefault" data-bind="checked: model.IsDefault,value:true" />是</label>
                            <label><input type="radio" name="IsDefault" data-bind="checked: model.IsDefault,value:false" />否</label>
                        </div>
                    </div>
                    <br />
                    <div class="row form-group">
                        <div class="col-xs-2"></div>
                        <div class="col-xs-4">
                            <button class="btn btn-default form-control" data-bind="click:Close">关闭</button>
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn-success form-control" type="submit" data-bind="click:(btnType()==0)?Save:Update,enable:btnStatus">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="CategoryModal" class="modal fade" data-keyboard="false" data-backdrop="static" role="dialog" tabindex="-1" aria-hidden="true" data-toggle="validator">
    <div class="modal-dialog" style="width: 30%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" style="text-align: center"><b>词典分类</b></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="col-sm-3 control-label">标题*</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" data-bind="value:categoryModel.Title" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="col-sm-3 control-label">编码*</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" data-bind="value:categoryModel.Code" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="col-sm-3 control-label">排序*</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" data-bind="value:categoryModel.Sortnum" required>
                        </div>
                    </div>

                    <br />
                    <div class="row form-group">
                        <div class="col-xs-2"></div>
                        <div class="col-xs-4">
                            <button class="btn btn-default form-control" data-bind="click:CloseCategory">关闭</button>
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn-success form-control" type="submit" data-bind="click:(btnType()==0)?SaveCategory:UpdateCategory,enable:btnStatus">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--Modal界面-->
</body>
</html>
<script>
    $(function () {

        //词典模型
        var model = function () {
            var _model = this;
            _model.KeyId = ko.observable(0);
            _model.Title = ko.observable("");
            _model.Code = ko.observable("");
            _model.CategoryId = ko.observable(0);

            _model.ParentId = ko.observable(0);
            _model.Sortnum = ko.observable(0);
            _model.Remark = ko.observable("");
            _model.Status = ko.observable("");

            _model.IsDefault = ko.observable(false);
            _model.IsAllowModify = ko.observable(false);
            _model.IsAllowDelete = ko.observable(false);
        }

        //词典分类
        var categoryModel = function () {
            var _model = this;
            _model.KeyId = ko.observable(0);
            _model.Title = ko.observable("");
            _model.Code = ko.observable("");
            _model.Sortnum = ko.observable(0);
            _model.Remark = ko.observable("");
        }

        var KObj = new function () {

            var self = this;
            self.model = new model();//实例化模型
            self.categoryModel = new categoryModel();//实例化模型
            self.btnStatus = ko.observable(true);//是否允许操作
            self.btnType = ko.observable(0);//按钮类型（0保存;1编辑）
            self.keyword = ko.observable('');//搜索内容
            self.selectRowNum = ko.observable(0);//当前选择的grid的行号
            self.selectCategoryRowNum = ko.observable(0);//当前选择的grid的行号


            self.ApiName = "/api/DicsManage/";
            
            self.GridUrl = self.ApiName + "GetList";
            self.AddUrl = self.ApiName + 'Add';
            self.UpdateUrl = self.ApiName + 'Update';
            self.RemoveUrl = self.ApiName + 'Delete'; 

            self.CategoryGridUrl = self.ApiName + "GetCategoryList";
            self.AddCategoryUrl = self.ApiName + 'AddCategory';
            self.UpdateCategoryUrl = self.ApiName + 'UpdateCategory';
            self.DeleteCategoryUrl = self.ApiName + 'DeleteCategory/'; 
            self.GetCategoryUrl = self.ApiName + 'GetCategory/'; 

            self.Table = $('#dicsTable');
            self.CategoryTable = $('#categoryTable');

            self.OkIcon = '<i class="glyphicon glyphicon-ok"style="color: gray;"></i>';
            self.RemoveIcon = '<i class="glyphicon glyphicon-remove"style="color: gray;"></i>';
            self.DicsModal = $('#DicsModal');
            self.CategoryModal = $('#CategoryModal');

            self.rows = null;
            self.categoryRows = null;
            //#region 公共方法

            //将json对象转换为Knockout viewModel对象
            self.JsonToViewModel = function (jsonData, viewModel) {
                ko.mapping.fromJSON(jsonData, {}, viewModel);
            }

            //将json对象转换为Knockout viewModel对象,可以选择忽略字段属性
            self.JsonToViewModel_Ignore = function (jsonData, viewModel, mapping) {
                var d = ko.mapping.fromJSON(jsonData, mapping);
                //设置Model中的observable数据
                for (var obj in d) {
                    if (ko.isWriteableObservable(d[obj])) {
                        viewModel[obj](d[obj]());
                    }
                }
            }

            //将js对象转换为viewModel
            self.ObjectToViewModel = function (object, viewModel) {
                ko.mapping.fromJS(object, {}, viewModel);
            }

            //清空对象基方法
            self.ClearBase = function (viewModel) {
                //清除Model中的observable数据
                for (var obj in viewModel) {
                    if (ko.isWriteableObservable(viewModel[obj])) {
                        switch (typeof (viewModel[obj]())) {
                            case 'boolean':
                                viewModel[obj](false);
                                break;
                            case 'number':
                                viewModel[obj](0);
                                break;
                            case 'string':
                                viewModel[obj]("");
                                break;
                            default:
                                viewModel[obj]("");
                                break;
                        }
                    }
                }

            }

            //时间替换T
            self.replaceTimeStr = function (v) {
                if (v() !== null) {
                    v(v().replace('T', ' ').substr(0, 19));
                }
            }

            //日期范围比较
            self.CompareDate = function (v1, v2) {
                var d1 = new Date(v1().replace(/\-/g, "\/"));
                var d2 = new Date(v2().replace(/\-/g, "\/"));
                if (d1 > d2) {
                    layer.alert('开始日期不能大于结束日期');
                    //v1(v2());
                    return false;
                } else {
                    return true;
                }
            }

            self.ModalShow = function () {
                self.DicsModal.modal("show");
            }

            self.ModalHide = function () {
                self.btnStatus(true)
                self.DicsModal.modal("hide");
            }

            //显示信息
            self.Message = function (msg, msgType) {
                $.scojs_message(msg, (msgType) ? $.scojs_message.TYPE_OK : $.scojs_message.TYPE_ERROR);
            }

            //错误处理
            self.AjaxErrorHandle = function (data) {
                if (data.ErrorCode === '103') {
                    reLogin();
                } else {
                    self.Message(data.ErrorMsg, false);
                }
            }

            //输出结果
            self.WriteResult = function (data) {
                var result = JSON.parse(data);
                self.Message(result.ErrorMsg, result.Success);
            };

            //#endregion

            self.Table.bootstrapTable({
                //请求方法
                method: 'get',
                //url: self.GridUrl,
                dataType: "json",
                singleSelect: true,
                sidePagination: "server", //服务端处理分页
                clickToSelect: true, //是否启用点击选中行
                //是否显示行间隔色
                striped: false,
                //showRefresh:true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                cache: false,
                //是否显示分页（*）
                pagination: false,
                //是否启用排序
                sortable: false,
                //排序方式
                sortOrder: "asc",
                pageSize: 50,
                //可供选择的每页的行数（*）
                pageList: [10, 20, 50],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',
                ////查询参数,每次调用是会带上这个参数，可自定义
                columns: [
                    {
                        field: 'Number',
                        title: '编号',
                        width: 40,
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    { title: 'ID', field: 'KeyId', width: 40, sortable: true, visible: false },
                    { title: '名称', field: 'Title', width: 160, sortable: true },
                    { title: '编码', field: 'Code', width: 100, sortable: true },
                    { title: '排序', field: 'Sortnum', width: 60, sortable: true },
                    //{ title: '父级ID', field: 'ParentId', width: 60, sortable: true },
                    //{ title: '分类ID', field: 'CategoryId', width: 120, sortable: true },
                    {
                        title: '默认',
                        field: 'IsDefault',
                        width: 60,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return (value) ? self.OkIcon : '';
                        }
                    },
                    {
                        title: '允许修改',
                        field: 'IsAllowModify',
                        width: 60,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return (value) ? self.OkIcon : self.RemoveIcon;
                        }
                    },
                    {
                        title: '允许删除',
                        field: 'IsAllowDelete',
                        width: 60,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return (value) ? self.OkIcon : self.RemoveIcon;
                        }
                    },
                    //{ title: '状态', field: 'Status', width: 60, sortable: true }
                    //{ title: '备注', field: 'Remark', width: 220, sortable: true }
                    
                ],
                onClickRow: function (row, $element) {
                    //取出先前保存的行对象，并修改颜色为白色
                    $('[data-index=' + self.selectRowNum() + ']').removeClass().css("background-color", "white");
                    //设置现在选中的行，设置颜色
                    //$element是当前tr的jquery对象
                    $element.css("background-color", "green");
                    self.rows = row;
                    //保存当前选中的行号
                    self.selectRowNum(Number($element.attr("data-index")));
                }//单击row事件
            });

            self.CategoryTable.bootstrapTable({
                //请求方法
                method: 'get',
                url: self.CategoryGridUrl,
                dataType: "json",
                singleSelect: true,
                sidePagination: "server", //服务端处理分页
                clickToSelect: true, //是否启用点击选中行
                //是否显示行间隔色
                striped: true,
                //showRefresh:true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                cache: false,
                //是否显示分页（*）
                pagination: true,
                //是否启用排序
                sortable: false,
                //排序方式
                sortOrder: "asc",
                pageSize: 20,
                //可供选择的每页的行数（*）
                pageList: [10, 20, 50],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',
                ////查询参数,每次调用是会带上这个参数，可自定义
                columns: [
                    { title: '『 分类名称 』', field: 'Title', width: 120, sortable: true },
                    { title: '排序', field: 'Sortnum', width: 30, sortable: true }
                ],
                onClickRow: function (row, $element) {
                    //取出先前保存的行对象，并修改颜色为白色
                    $('[data-index=' + self.selectCategoryRowNum() + ']').removeClass().css("background-color", "white");
                    //设置现在选中的行，设置颜色
                    //$element是当前tr的jquery对象
                    $element.css("background-color", "green");
                    self.categoryRows = row;
                    self.rows = null;
                    //console.log(row);
                    //保存当前选中的行号
                    self.selectCategoryRowNum(Number($element.attr("data-index")));
                    //读取分类对应的详细数据
                    self.Table.bootstrapTable('refresh', { url: self.GridUrl, query: { searchModel: row.KeyId } });
                }//单击row事件
            });
            self.Refresh = function () {
                self.Table.bootstrapTable('refresh', { query: { searchModel: self.categoryRows.KeyId } });
            }

            self.Search = function () {
                var searchTxt = self.keyword();

                if ($.trim(searchTxt) !== '') {
                    self.CategoryTable.bootstrapTable('refresh', { query: { searchModel: searchTxt } });
                } else {
                    self.CategoryTable.bootstrapTable('refresh');
                }
            }

            self.Reset = function () {
                self.keyword('');
            };

            //关闭模态框
            self.Close = function () {
                self.ClearBase(self.model);
                self.ModalHide();
            };

            //输出结果
            self.WriteResult = function (data) {
                //console.info(data);
                var result = JSON.parse(data);
                self.Message(result.ErrorMsg, result.Success);
                self.rows = null;
                self.Close();
                var categoryRows = self.categoryRows;
                if (!categoryRows) return;
                self.Table.bootstrapTable('refresh', { query: { searchModel: categoryRows.KeyId } });
            };

            //关闭分类
            self.CloseCategory = function () {
                self.ClearBase(self.categoryModel);
                self.CategoryModal.modal("hide");
            }

            //输出分类结果
            self.WriteCategoryResult = function (data) {
                //console.info(data);
                var result = JSON.parse(data);
                self.Message(result.ErrorMsg, result.Success);
                self.categoryRows = null;
                self.CloseCategory();
                self.CategoryTable.bootstrapTable('refresh');
            };

            //判断是否有选择行；
            self.IsSelectRow = function (data) {
                if (!self.rows) {
                    self.Message('没有选择要操作的行，请先选择一行!', false);
                    return false;
                } else {
                    return true;
                }
            };

            //打开模态框
            self.OpenAddModal = function () {
                self.btnType(0);
                self.ModalShow();
            };

            //保存
            self.Save = function() {
                if (!self.categoryRows) {
                    self.Message('没有选择要一个词典类别，请先选择一个类别!', false);
                    return;
                }
                self.model.CategoryId(self.categoryRows.KeyId);
                self.OperationRow(self.AddUrl);
            };

            //编辑和保存基方法，复用
            self.OperationRow = function (url) {
                if (!self.model.Title()) {
                    layer.alert("标题不能为空！");
                    return false;
                }
                if (!self.model.Code()) {
                    layer.alert("编码不能为空！");
                    return false;
                }
                if (!self.model.CategoryId()) {
                    layer.alert("类别不能为空！");
                    return false;
                }
                self.btnStatus(false);
                var param = {
                    model: ko.toJSON(self.model)
                };
                postWeb(url, param, function (data) {
                    self.btnStatus(true);
                    self.WriteResult(data);
                });
            };

            //打开编辑模态框
            self.OpenEditModal = function () {
                var rows = self.rows;
                if (!rows) {
                    self.Message('没有选择要操作的行，请先选择一行!', false);
                    return false;
                }
                if (!rows.IsAllowModify) {
                    layer.alert("记录被设置为不允许修改！");
                    return false;
                }
                self.btnType(1);
                
                var param = {
                    id: rows.KeyId
                }
                getWeb(self.ApiName + rows.KeyId, null, function (data) {
                    var result = JSON.parse(data);
                    if (result.Success) {
                        self.ObjectToViewModel(result.ResultObject, self.model);
                        self.ModalShow();
                    } else {
                        self.AjaxErrorHandle(result);
                    }
                });
            };

            //编辑
            self.Update = function () {
                self.OperationRow(self.UpdateUrl);
            };

            //删除词典
            self.Delete = function () {
                var rows = self.rows;
                if (!rows) {
                    self.Message('没有选择要操作的行，请先选择一行!', false);
                    return false;
                }
                if (!rows.IsAllowDelete) {
                    layer.alert("记录被设置为不允许删除！");
                    return false;
                }

                var ret = confirm("你确定要删除本条记录吗?");
                if (!ret) return;

                var param = {
                    KeyId: rows.KeyId
                }
                deleteWeb(self.ApiName + rows.KeyId, param, function (data) {
                    self.WriteResult(data);
                });
            }

            //打开添加词典分类弹窗
            self.OpenAddCategoryModal = function() {
                self.btnType(0);
                self.CategoryModal.modal("show");
            }
            //打开编辑词典分类弹窗
            self.OpenEditCategoryModal = function () {
                var rows = self.categoryRows;
                if (!rows) return;
                self.btnType(1);

                var param = {
                    id: rows.KeyId
                }
                getWeb(self.GetCategoryUrl + rows.KeyId, null, function (data) {
                    var result = JSON.parse(data);
                    if (result.Success) {
                        self.ObjectToViewModel(result.ResultObject, self.categoryModel);
                        self.CategoryModal.modal("show");
                    } else {
                        self.AjaxErrorHandle(result);
                    }
                });
            }
            //删除词典分类
            self.DeleteCategory = function () {
                var rows = self.categoryRows;
                if (!rows) {
                    self.Message('没有选择要操作的行，请先选择一行!', false);
                    return false;
                }

                var ret = confirm("你确定要删除本条分类记录吗?");
                if (!ret) return;
                var param = {
                    KeyId: rows.KeyId
                }
                deleteWeb(self.DeleteCategoryUrl + rows.KeyId, param, function (data) {
                    self.WriteCategoryResult(data);
                });
            }

            //编辑分类和保存分类基方法，复用
            self.OperationCategoryRow = function (url) {

                self.btnStatus(false);
                var param = {
                    model: ko.toJSON(self.categoryModel)
                };
                postWeb(url, param, function (data) {
                    self.btnStatus(true);
                    self.WriteCategoryResult(data);
                });
            };

            //修改词典分类
            self.UpdateCategory = function () {
                var rows = self.categoryRows;
                if (!rows) {
                    self.Message('没有选择要操作的行，请先选择一行!', false);
                    return;
                }

                self.OperationCategoryRow(self.UpdateCategoryUrl);
            }

            //保存词典分类
            self.SaveCategory = function() {
                self.OperationCategoryRow(self.AddCategoryUrl);
            }
        }();
        ko.applyBindings(KObj);
    });
</script>
